<template>
    <div class="Box">
        <div class="title">
            <h3>数据统计</h3>
        </div>
        <div class="blackLine"></div>
        <div id="echartBox">
            <div class="echart" id="echart1" ref="chart1">
                <!-- 本月销售最多 -->
                <font class="font1">本月销售最多</font><br/>
                <el-image
                    style="width: 200px; height: 100px;margin-left: 60px"
                    :src="Echart1.url"
                    :fit="contain"></el-image>
                <div style="width:15%;height:10px;margin:auto;font-size:10px">
                    {{Echart1.name}}
                </div>
            </div>
            <div class="echart" id="echart2" ref="chart2">
                <!-- 本月销售价格最高 -->
                <font class="font1">本月售价最高</font><br/>
                <el-image
                    style="width: 200px; height: 100px;margin-left: 60px"
                    :src="Echart2.url"
                    :fit="contain"></el-image>
                <div style="width:15%;height:10px;margin:auto;font-size:10px">
                    {{Echart2.name}}
                </div>
            </div>
            <div class="echart" id="echart3" ref="chart3">
                <div class="block">
                    <el-date-picker
                      value-format="yyyy-MM-dd"
                      :change="getTotalPrice()"
                      v-model="Echart3.clock_value"
                      type="datetimerange"
                      :picker-options="Echart3.pickerOptions"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      align="right">
                    </el-date-picker>
                </div>
                <div class="showPrice">
                    <span class="showPriceTitle">销售总价</span>
                    <span class="showPrice_price">{{Echart3.totalPrice}}RMB</span>
                </div>
            </div>
        </div>
        <div style="width:30px;index-z:2;position:absolute;left:50px;top:190px">
            <div class="block">
                <el-date-picker
                  :change="this.getEchart4()"
                  value-format="yyyy-MM-dd"
                  v-model="Echart4.clock"
                  type="year"
                  placeholder="选择年">
                </el-date-picker>
            </div>
        </div>
        <div id="echart4" ref="chart4">
        </div>
    </div>
</template>
  
<script>
export default {
    data(){
        return{
            Echart1:{
                name:'',
                url:''
            },
            Echart2:{
                name:'',
                url:''
            },
            Echart3:{
                pickerOptions: {
                    shortcuts: [{
                            text: '最近一周',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近一个月',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                            }
                    }]
                },
                // 总价的时间
                clock_value: ['1','1'],
                totalPrice: ''
            },
            Echart4:{
                clock: '2023',
                yData: [],
            }


        };
    },
    methods: {
        // 加载echarts--示例
        // getLoadEcharts() {
        //     // 绑定div
        //     const chart1 = this.$refs.chart1
        //     if (chart1) {
        //         const myChart = this.$echarts.init(chart1)
        //         const option = {
        //             // 图表标题
        //             title: {
        //                 text: 'Stacked Line'
        //             },
        //             tooltip: {
        //                 trigger: 'axis'
        //             },
        //             legend: {
        //                 data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        //             },
        //             grid: {
        //                 left: '3%',
        //                 right: '4%',
        //                 bottom: '3%',
        //                 containLabel: true
        //             },
        //             toolbox: {
        //                 feature: {
        //                     saveAsImage: {},
        //             }
        //             },
        //             xAxis: {
        //                 type: 'category',
        //                 boundaryGap: false,
        //                 data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
        //             },
        //             yAxis: {
        //                 type: 'value'
        //             },
        //             series: [
        //                 {
        //                     name: 'Email',
        //                     type: 'line',
        //                     stack: 'Total',
        //                     data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230]
        //                 },
        //                 {
        //                     name: 'Union Ads',
        //                     type: 'line',
        //                     stack: 'Total',
        //                     data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330]
        //                 },
        //                 {
        //                     name: 'Video Ads',
        //                     type: 'line',
        //                     stack: 'Total',
        //                     data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330]
        //                 },
        //                 {
        //                     name: 'Direct',
        //                     type: 'line',
        //                     stack: 'Total',
        //                     data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330]
        //                 },
        //                 {
        //                     name: 'Search Engine',
        //                     type: 'line',
        //                     stack: 'Total',
        //                     data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330]
        //                 }
        //             ]
        //         }
        //         myChart.setOption(option)
        //         window.addEventListener("resize", function() {
        //             myChart.resize()
        //         })
        //     }
        //     this.$on('hook:destroyed',()=>{
        //             window.removeEventListener("resize", function() {
        //             myChart.resize();
        //         });
        //     })
        // },
        // 加载echarts
        getEchart4() {
            this.$axios.get("http://localhost:8888/hwy/cater/eChart/getEchartByYear/"+this.Echart4.clock)
                .then((response) => {
                    // console.log(response.data.data)
                    this.Echart4.yData = response.data.data;
                    // console.log("1:"+this.Echart4.yData)
                    const chart4 = this.$refs.chart4;
                    if (chart4) {
                        const myChart = this.$echarts.init(chart4)
                        const option = {
                            xAxis: {
                                type: 'category',
                                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',]
                            },
                            yAxis: {
                                position: 'left',
                                type: 'value'
                            },
                            series: [
                                {
                                    data: this.Echart4.yData,
                                    // data: ["120.00",100.00,,,,,],
                                    type: 'line'
                                }
                            ],
                            tooltip: {
                                trigger: 'axis',
                            },
                            title: {
                                show: true,
                                text: "月销量趋势",
                            }
                        }
                        myChart.setOption(option)
                        window.addEventListener("resize", function() {
                            myChart.resize()
                        })
                    }
                })
        },
        // 本月销量最多查询
        getMonthNumMax() {
            this.$axios.get("http://localhost:8888/hwy/cater/eChart/MonthNumMax")
                .then((response) => {
                    console.log(response.data.data);
                    this.Echart1.name = response.data.data.name;
                    this.Echart1.url = response.data.data.url;
                })
        },
        // 查询本月售价最高
        getMonthPriceMax() {
            this.$axios.get("http://localhost:8888/hwy/cater/eChart/MonthPriceMax")
                .then((response) => {
                    console.log(response.data.data);
                    this.Echart2.name = response.data.data.name;
                    this.Echart2.url = response.data.data.url;
                })
        },
        // 获取某段时间的总售价
        getTotalPrice() {
            this.$axios.get("http://localhost:8888/hwy/cater/eChart/getTotalPrice/"+this.Echart3.clock_value[0]+'/'+this.Echart3.clock_value[1])
                .then((response) => {
                    // console.log(response.data.data);
                    this.Echart3.totalPrice = response.data.data;
                })
        }
    },
    mounted(){
        this.getEchart4();
        this.getMonthNumMax();
        this.getMonthPriceMax();
        this.getTotalPrice();

    },
    computed: {
        
    },
    watch: {
        
    }

}
</script>

<style scoped>
@import '../../assets/css/common.css';
@import '../../assets/css/data/dataCount.css'
</style>